<template>
    <div ref="chart" style="height: 370px;">

    </div>
</template>

<script setup lang="ts">
import axios from "axios";
import * as echarts from "echarts";
import type { EChartsOption } from 'echarts/types/dist/echarts.d.ts'
import { onMounted, ref, reactive } from "vue";

let option: EChartsOption = {
    legend: {
        show: true, // 显示图例
        left: 10, // 图例位置（距离顶部10px）
        bottom: 10, // 水平居中
        orient: 'vertical',
        data: [], // 图例名称，需与series.name一致
        textStyle: { color: '#999' }
    },
    geo: {
        type: "map",
        tooltip: {
            show: true
        },
        // label: { show: true },
        map: 'china',
        roam: true,
        zoom: 1.7,

        itemStyle: {
            areaColor: '#2E72BF', // 区域填充色
        },
        center: [105.0, 35.8],

    },
    series: [],

}



let chart = ref<HTMLDivElement | null>(null)
let myECharts: echarts.ECharts | null = null
let original: any = {}
const mapAPIKey = reactive({
    securityJsCode: '582c16688405bd7ae1b0ab34478efea6',
    key: '731417e7a8bfd002ed5fcdd14de18382'
})

const colorList = ['#0BA82C', '#3079FF', '#16F2D9']

function init() {
    myECharts = echarts.init(chart.value)
    axios({
        url: "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json"
    }).then(({ data }) => {

        echarts.registerMap('china', data)

        // 关联
        myECharts && myECharts.setOption(option)

        axios.get("/api/map.json").then(({ data }) => {
            // console.log(data);
            data.forEach((item: any, index: number) => {
                (option.legend as any).data.push(item.name);
                (option.series as any).push({
                    name: item.name, // 散点系列名称，与legend.data对应
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    symbolSize: 14,
                    data: item.children,
                    itemStyle: {
                        color: colorList[index]
                    },
                    rippleEffect: {
                        scale: 4, // 波纹最大缩放比例（值越大波纹越大）
                        period: 3, // 波纹动画周期（秒），值越小动画越快
                        brushType: 'stroke' // 波纹绘制方式（fill填充 / stroke描边）
                    }
                })
            })
            myECharts?.setOption(option)
        })
    })


}




onMounted(() => {
    init()
    window.addEventListener('resize', () => { myECharts?.resize() });
})
</script>
